import React from 'react'
import { View, StyleSheet, Text } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import PropTypes from 'prop-types'
import CustomButton from '../button/CustomButton'

export default function DeleteCompleteBtn (props) {
  const {
    deleteText,
    completeText,
    style,
    hideDelete,
    onDelete,
    onComplete
  } = props

  this.deleteClick = () => {
    onDelete && onDelete()
  }
  this.completeClick = () => {
    onComplete && onComplete()
  }

  return (
    <View style={style}>
      <View style={styles.btnView}>
        {
          hideDelete ? null : (
            <CustomButton
              onPress={this.deleteClick}
              style={styles.deleteView}>
              <Text style={styles.deleteLabel}>{deleteText}</Text>
            </CustomButton>
          )
        }
        <CustomButton
          onPress={this.completeClick}
          style={styles.completeView}>
          <Text style={styles.completeLabel}>{completeText}</Text>
        </CustomButton>
      </View>
    </View>
  )
}
DeleteCompleteBtn.propTypes = {
  deleteText: PropTypes.string,
  completeText: PropTypes.string,
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  hideDelete: PropTypes.bool,
  onDelete: PropTypes.func,
  onComplete: PropTypes.func
}
DeleteCompleteBtn.defaultProps = {
  deleteText: '删除本条',
  completeText: '完成',
  hideDelete: false
}

const styles = StyleSheet.create({
  btnView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  deleteView: {
    width: ScaleS(112),
    height: ScaleS(50),
    marginRight: ScaleS(10),
    alignItems: 'center',
    justifyContent: 'center',
    borderStyle: 'solid',
    borderColor: '#999999',
    borderWidth: ScaleS(1),
    borderRadius: ScaleS(5)
  },
  deleteLabel: {
    color: '#444444',
    fontSize: ScaleT(16),
    fontWeight: '400'
  },
  completeView: {
    flex: 1,
    height: ScaleS(50),
    alignItems: 'center',
    justifyContent: 'center',
    borderStyle: 'solid',
    borderColor: '#000000',
    backgroundColor: '#000000',
    borderWidth: ScaleS(1),
    borderRadius: ScaleS(5)
  },
  completeLabel: {
    color: '#FFFFFF',
    fontSize: ScaleT(16),
    fontWeight: '500'
  }
})
